<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Web Time</title>
  <style rel="stylesheet" type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
  html, body {
    width: 100%;
    height: 100%;
  }
  body {
    text-align: center;
    background-color: #000;
  }
  .time_container {
    position: fixed;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 120px;
    text-align: center;
    transform: translate(-50%, -50%);
  }
  .time_container::before {
    display: block;
    position: absolute;
    left: -20px;
    top: 0;
    content: '';
    width: 160px;
    height: 160px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .1);
  }
  .time_container::after {
    display: block;
    position: absolute;
    right: -10px;
    top: 0;
    content: '';
    width: 160px;
    height: 160px;
    border-radius: 8px;
    background-color: rgba(255, 255, 255, .1);
  }
  .toggle_btn {
    color: #111;
    margin: 0 auto;
    background-color: #333;
    border: none 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
  }
  </style>
</head>
<body>
  <div class="time_container" id="time">
    00:00
  </div>
  <button type="button" class="toggle_btn" onclick="toggleFullScreen(event)">点我全屏</button>
  <script type="text/javascript">
     //全屏
     function fullScreen(){
        var el = document.documentElement;
        var rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullscreen;      
          if(typeof rfs != "undefined" && rfs) {
              rfs.call(el);
          };
        return;
    }
    //退出全屏
    function exitScreen(){
        if (document.exitFullscreen) {  
            document.exitFullscreen();  
        }  
        else if (document.mozCancelFullScreen) {  
            document.mozCancelFullScreen();  
        }  
        else if (document.webkitCancelFullScreen) {  
            document.webkitCancelFullScreen();  
        }  
        else if (document.msExitFullscreen) {  
            document.msExitFullscreen();  
        } 
        if(typeof cfs != "undefined" && cfs) {
            cfs.call(el);
        }
    }
    //ie低版本的全屏，退出全屏都这个方法
    function iefull(){
        var el = document.documentElement;
        var rfs =  el.msRequestFullScreen;
        if(typeof window.ActiveXObject != "undefined") {
            //这的方法 模拟f11键，使浏览器全屏
            var wscript = new ActiveXObject("WScript.Shell");
            if(wscript != null) {
                wscript.SendKeys("{F11}");
            }
        }
    }
    function doubleNumber (val) {
      val = val < 10 ? '0' + val : val;
      return val;
    }
    function activeTime () {
      var nTime = new Date();
      var hh = nTime.getHours();
      var mm = nTime.getMinutes();
      var sTime = doubleNumber(hh) + ' : ' + doubleNumber(mm);
      console.log(sTime)
      return sTime;
    }
    function toggleFullScreen(e){
      var el=e.srcElement||e.target;//target兼容Firefox
      var status = true;
      el.innerHTML == '点我全屏' ? status = true : status = false;
      el.innerHTML=='点我全屏'?el.innerHTML='退出全屏':el.innerHTML='点我全屏';
      if (status) {
        fullScreen()
      } else {
        exitScreen()
      }
    }
    window.onload = function () {
      var Time = document.getElementById('time');
      Time.innerHTML = activeTime();
      setInterval(function() {
        Time.innerHTML = activeTime();
      }, 60000)
    }
  </script>
</body>
</html>